<template>
  <s-table
    class="h100"
    :columns="columns"
    :data="loadData"
    rowKey="id"
    ref="table"
  >
    <template
      slot-scope="text"
      v-for="column in commonColumns"
      :slot="column.scopedSlots.customRender"
    >
      <table-ellipsis :text="text" :key="column.key"></table-ellipsis>
    </template>
    <template #vehicleType="text">
      {{ $t(vehicleTypeObj[text]) }}
    </template>
    <template #productionTime="text">
      <table-ellipsis v-if="text" :text="text|moment('YYYY-MM-DD')"></table-ellipsis>
      <span v-else>-</span>
    </template>
    <template #province="text">
      <table-ellipsis :text="$t(text) || '-'"></table-ellipsis>
    </template>
  </s-table>
</template>
<script>
import { relatedVehicleTbColumns } from '../config/list'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { mapState } from 'vuex'
export default {
  props: {
    modelId: {
      type: String,
      default: ''
    }
  },
  components: {
    TableEllipsis,
    STable
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    }),
    vehicleTypeObj () {
      return this.$store.getters.vehicleTypeObj()
    },
    commonColumns () {
      return relatedVehicleTbColumns.filter(item => !item.special)
    }
  },
  data () {
    return {
      columns: relatedVehicleTbColumns
    }
  },
  watch: {
    instantUpdateTime: {
      handler () {
        this.refreshData(true)
      },
      immediate: true
    }
  },
  methods: {
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = {}
      JnqueryParam.modelIds = [vm.modelId]
      return vm.$api.getVehiclePageData({ ...parameter, ...JnqueryParam })
    },
    refreshData (bool = false) {
      this.$refs.table && this.$refs.table.refresh(bool)
    }
  },
  mounted(){
    this.$store.dispatch('getManufacturerDictCodeData');
  }
}
</script>
<style lang="less" scoped></style>
